<style scoped>
.cardLeft{

}
.cardMiddle{

}
.cardRight{

}
.ivu-card-bordered .cardLeft{
  border-left-color: #4d96e2;
  border-left-width: 4px;
  /*border-right: none;*/
  /*border-bottom: none;*/
  /*border-top: none;*/
  margin-right: 16px;
}
.ivu-card-bordered .cardMiddle{
  border-left-color: #2a8d42;
  border-left-width: 4px;
  /*border-bottom: none;*/
  /*border-top: none;*/
  /*border-right: none;*/
  margin-right: 16px;
}
.ivu-card-bordered .cardRight{
  border-left-color: #e0bd0e;
  border-left-width: 4px;
  /*border-bottom: none;*/
  /*border-top: none;*/
  /*border-right: none;*/
  margin-right: 3px;
}

.infoCard{
  height: 200px;
  padding-bottom: 10px;
}

.title{
  font-size: 25px;
  font-weight: bold;
  margin-bottom: 20px;
}

span{
  margin: 10px;
}
Button{
  margin-left: 10px;
}
</style>
<template>
  <div>
    <Tabs value="name1">
      <TabPane label="今日健康监控" name="name1">
        <Card>
          <Row>
            <Col span="8" >
              <Card class="cardLeft">
                <span style="font-size: 28px;font-weight: bold">心率</span>
                <div style="margin-top: 40px">
                  <Row>
                    <Col span="8">
                      正常人数
                      <div><count-to :end="32" count-class="count-style"/></div>
                    </Col>
                    <Col span="8">
                      异常人数
                      <div><count-to :end="6" count-class="count-style"/></div>
                    </Col>
                    <Col span="8">
                      未检测人数
                      <div><count-to :end="7" count-class="count-style"/></div>
                    </Col>
                  </Row>
                </div>
              </Card>
            </Col>
            <Col span="8">

              <Card class="cardMiddle">
                <span style="font-size: 28px;font-weight: bold">体温</span>
                <div style="margin-top: 40px">
                  <Row>
                    <Col span="8">
                      正常人数
                      <div><count-to :end="32" count-class="count-style"/></div>
                    </Col>
                    <Col span="8">
                      异常人数
                      <div><count-to :end="6" count-class="count-style"/></div>
                    </Col>
                    <Col span="8">
                      未检测人数
                      <div><count-to :end="7" count-class="count-style"/></div>
                    </Col>
                  </Row>
                </div>
              </Card>
            </Col>
            <Col span="8">

              <Card class="cardRight">
                <span style="font-size: 28px;font-weight: bold">血氧饱和度</span>
                <div style="margin-top: 40px">
                  <Row>
                    <Col span="8">
                      正常人数
                      <div><count-to :end="32" count-class="count-style"/></div>
                    </Col>
                    <Col span="8">
                      异常人数
                      <div><count-to :end="6" count-class="count-style"/></div>
                    </Col>
                    <Col span="8">
                      未检测人数
                      <div><count-to :end="7" count-class="count-style"/></div>
                    </Col>
                  </Row>
                </div>
              </Card>
            </Col>
          </Row>

          <Card style="margin-top: 30px">
            <Row>
              <span style="font-size: 22px;margin-right: 30px">快速筛选：</span>
              <RadioGroup  type="button"size="large" style="margin-top: 5px;margin-right: 5px">
                <Radio label="large">已检测</Radio>
                <Radio label="small">未检测</Radio>
              </RadioGroup>
              <Button size="large">心率不正常</Button>
              <Button size="large">体温不正常</Button>
              <Button size="large">血氧饱和度不正常</Button>


            </Row>
            <Divider/>
            <Row style="margin-bottom:15px">
              <div class="search-con search-con-top" style="display: inline-block">
                <span>时间筛选:</span>
                <DatePicker v-model="queryData.start" type="date" placeholder="开始时间" style="width: 150px"></DatePicker>
                ——
                <DatePicker v-model="queryData.end" type="date" placeholder="结束时间" style="width: 150px"></DatePicker>
<!--                <br>-->
                <span>工号查询:</span>
                <Input v-model="queryData.account" placeholder="请输入工号名称" style="width: 200px"/>
                <span style="">姓名查询:</span>
                <Input v-model="queryData.name" placeholder="请输入工号名称" style="width: 200px"/>
                <Button type="primary" @click="queryList" class="query">查询</Button>
                <Button @click="reset" class="reset">重置</Button>
              </div>

            </Row>

            <Table :loading="loading" :columns="tableColumns" :data="tableData" size="large">
              <template slot="health" slot-scope="scope">
                <Button @click="healthModal = true" type="success">查看详情</Button>
              </template>
            </Table>
            <div style="margin: 10px;overflow: hidden">
              <div style="float: right;">
                <Page :total="100" :current="queryData.currentPage" @on-change="changePage"  @on-page-size-change="changeSize" show-elevator show-sizer></Page>
              </div>
            </div>
          </Card>
        </Card>

      </TabPane>
      <TabPane label="历史健康数据" name="name2">
        <div class="content">
            <card shadow>
              <Row>
                <Col span="8">
                  <span style="margin-right: 6px">开始时间:</span>
                  <DatePicker type="date" :options="dateOption" placement="bottom-end" placeholder="Select date" style="width: 200px"></DatePicker>
                </Col>
                <Col span="8">
                  <span style="margin-right: 6px">结束时间:</span>
                  <DatePicker type="date" :options="dateOption" placement="bottom-end" placeholder="Select date" style="width: 200px"></DatePicker>
                </Col>
              </Row>
              <br>
              <Row>
                <Col span="8">
                  <span style="margin-right: 6px">按工号:</span>
                  <Input style="width: 200px"></Input>
                </Col>
                <Col span="8">
                  <span style="margin-right: 6px">按姓名:</span>
                  <Input style="width: 200px"></Input>
                </Col>
                <Col span="8">
                  <Button  class="search-btn" type="primary"  size="large" icon="ios-search" style="margin-left: 100px">搜索</Button>
                </Col>
              </Row>
            </card>
          <card>
            <div class="title">
              查询结果:
            </div>
            <div style="width: 1000px;height: 700px;margin-left: 100px  ">
              <HealthChart
                :xdata="xdata"
                :callQuantity="callQuantity"
                :successRate="successRate"
                :failureRate="failureRate"
                text="危险评分"
                style="width: 1000px;height: 350px;">
              </HealthChart>
            </div>
          </card>
        </div>
      </TabPane>
    </Tabs>

  </div>
</template>

<script>
import { HealthChart} from '../../charts'
import InforCard from '_c/info-card'
import CountTo from '_c/count-to'
import axios from '@/libs/api.request'
import {getHealthRecordList, getViolationRecordList} from "../../../api/data";

export default {
  name: "drive-health",
  components: {
    InforCard,
    CountTo,
    HealthChart
  },
  data(){
    return {
      queryData: {
        start: '',
        end: '',
        name: '',
        account: '',
        page: '1',
        limit: '10'
      },
      dateOption: {
        shortcuts: [
          {
            text: '1 week',
            value () {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              return [start, end];
            }
          },
          {
            text: '1 month',
            value () {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              return [start, end];
            }
          },
          {
            text: '3 months',
            value () {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              return [start, end];
            }
          }
        ]
      },
      border: ['香蕉'],
      tableColumns: [
        {
          title: '工号',
          key: 'account',
          align:'center'
        },
        {
          title: '姓名',
          key: 'name',
          align:'center'
        },
        {
          title: '日期',
          key: 'createTime',
          align:'center'
        },
        {
          title: '体温',
          key: 'uhrecordTemprt',
          align:'center'
        },
        {
          title: '心率',
          key: 'uhrecordHr',
          align:'center'
        },
        {
          title: '血压',
          key: 'uhrecordBp',
          align:'center'
        },
        {
          title: '血氧饱和度',
          key: 'uhrecordSao2',
          align:'center'
        },
        {
          title: '检测状态',
          key: 'status',
          align:'center'
        },
        {
          title: '健康情况',
          key: 'health',
          slot:'health',
          align:'center'
        }
      ],
      tableData: [],
      xdata:['2021/12/13','2021/12/14','2021/12/15','2021/12/16','2021/12/17','2021/12/18','2021/12/19','2021/12/20'],
      callQuantity:[31,156,152,122,111,63,53,66],
      successRate:[100,19,25,56,79,84,91,76],
      failureRate:[30,16,64,96,31,36,12,43]
    }
  },
  methods:{
    changePage(pageNumber) {
      this.queryData.page = pageNumber
      this.queryList()
    },
    changeSize(pageSize) {
      this.queryData.limit = pageSize
    },
    queryList() {
      console.log(this.queryData)
      getHealthRecordList(this.queryData).then(res=>{
        this.tableData=res.data.obj
        this.tableData.forEach(item=>{
          item.createTime=item.createTime[0]+"-"+item.createTime[1]+"-"+item.createTime[2];
        })
        console.log(res)
      })
    },
    handleSearch(){
      alert("点击了")
      axios.request({
        url: '/friend/addSubscribe',
        method: 'get',
        params:{
          account: "15957169831",
          friendAccount: "15925779133",
        }
      }).then(res=>{
        alert("成功了")
      })
        .catch(err=>{
          alert("失败了")
      })
    }
  }
}
</script>


